<template>
  <div class="container mt-6">
    <h2 class="form-title" style="text-align: center;">车辆生成电子凭证二维码</h2>

    <form @submit.prevent="handleSubmit" class="driver-form">
      <div class="row">
        <div class="col-md-6">
          <div class="form-group">
            <label for="name" class="form-label">车牌号 <span class="text-danger">*</span></label>
<!--            <input-->
<!--                type="text"-->
<!--                class="form-control"-->
<!--                id="name"-->
<!--                v-model="driver.name"-->
<!--                required-->
<!--            >-->
            <select
                class="form-control"
                id="licensePlate"
                v-model="driver.name"
            >
              <option value="">请选择车牌号</option>
              <!-- 固定写死的5个车牌号选项 -->
              <option value="冀A88888">冀A88888</option>
              <option value="冀A12345">冀A12345</option>
              <option value="冀A56789">冀A56789</option>
              <option value="冀A98765">冀A98765</option>
              <option value="冀A11223">冀A11223</option>
            </select>
          </div>
        </div>
        <div class="col-md-6">
          <div class="form-group">
            <label for="age" class="form-label">驾龄</label>
            <input
                type="number"
                class="form-control"
                id="age"
                v-model.number="driver.age"
            >
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col-md-6">
          <div class="form-group">
            <label for="adress" class="form-label">地址</label>
            <input
                type="text"
                class="form-control"
                id="adress"
                v-model="driver.adress"
                placeholder="请输入地址"
            >
          </div>
        </div>
        <div class="col-md-6">
          <div class="form-group">
            <label for="info" class="form-label">信息</label>
            <input
                type="text"
                class="form-control"
                id="info"
                v-model="driver.info"
                placeholder="请输入附加信息"
            >
          </div>
        </div>
      </div>

      <div class="form-actions mt-6">
        <button type="submit" class="btn btn-primary" :disabled="loading">
          <i v-if="loading" class="el-icon-loading mr-2"></i>
          {{ loading ? '生成中...' : '生成' }}
        </button>
        <a href="/certificate/form" class="btn btn-secondary ms-2">返回</a>
      </div>
    </form>

    <!-- 二维码弹窗 -->
    <el-dialog
        title="人员二维码"
        :visible.sync="qrDialogVisible"
        width="30%"
        center
    >
      <div class="qr-code-container">
        <img :src="qrCodeUrl" alt="人员二维码" class="qr-code-image">
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {usePersonApi} from '@/api/person';
import { Dialog } from 'element-ui';
export default {
  name: 'DriverAdd',
  components: {
    ElDialog: Dialog
  },
  data() {
    return {
      driver: {
        name: '',
        age: null,
        adress: '',
        info: ''
      },
      qrDialogVisible: false,
      qrCodeUrl: '',
      loading: false
    }
  },
  methods: {
    handleSubmit() {
      this.loading = true;
      usePersonApi().add(this.driver)
          .then(response => {
            if (response.code === 0) {
              this.driver.id = response.data.id;
              this.generateQrCode();
            } else {
              this.$message.error(`保存失败: ${response.msg || '未知错误'}`);
            }
          })
          .catch(error => {
            console.error('保存人员信息接口异常:', error);
            this.$message.error('网络错误，无法连接服务器');
          })
          .finally(() => {
            this.loading = false;
          });
    },

    generateQrCode() {
      this.loading = true;
      usePersonApi().generateQrCode(this.driver)
          .then(res => {
            console.log('二维码接口响应:', res);
            // 直接使用后端返回的二维码图片URL
            if (res.code === 0 && typeof res.qrCode === 'string') {
              this.qrCodeUrl = res.qrCode;  // 后端返回的是base64格式图片
              this.qrDialogVisible = true;
              this.$message.success('二维码生成成功');
            } else {
              this.$message.error(`生成二维码失败: ${res.msg || '未获取到有效图片数据'}`);
              console.error('二维码数据异常:', res.qrCode);
            }
          })
          .catch(error => {
            console.error('生成二维码接口异常:', error);
            this.$message.error('网络错误，无法生成二维码');
          })
          .finally(() => {
            this.loading = false;
          });
    }
  }
}
</script>

<style scoped>
/* 保持原有样式不变 */
.container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px;
}

.form-title {
  color: #2c3e50;
  margin-bottom: 1.5rem;
  font-size: 1.8rem;
  font-weight: 600;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid #eaecef;
}

.driver-form {
  background: #ffffff;
  padding: 2.5rem;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-label {
  display: block;
  margin-bottom: 0.6rem;
  font-weight: 500;
  color: #495057;
  font-size: 0.95rem;
}

.form-control {
  display: block;
  width: 100%;
  padding: 0.65rem 0.9rem;
  font-size: 1rem;
  line-height: 1.5;
  color: #333;
  background-color: #fff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1.2rem;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.btn-primary {
  color: #fff;
  background-color: #165dff;
  border-color: #165dff;
}

.btn-secondary {
  color: #495057;
  background-color: #f1f5f9;
  border-color: #e2e8f0;
}

.ms-2 {
  margin-left: 0.5rem !important;
}

.mt-6 {
  margin-top: 2rem !important;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -12px;
  margin-right: -12px;
  margin-bottom: 0.5rem;
}

.col-md-6 {
  flex: 0 0 auto;
  width: 50%;
  padding-left: 12px;
  padding-right: 12px;
}

.text-danger {
  color: #ff4d4f !important;
}

.form-actions {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.qr-code-container {
  text-align: center;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 8px;
}

.qr-code-image {
  max-width: 100%;
  height: auto;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  padding: 10px;
  background-color: white;
  border-radius: 4px;
}

.el-dialog__header {
  border-bottom: 1px solid #e9ecef;
  margin-bottom: 15px;
}

@media (max-width: 768px) {
  .col-md-6 {
    width: 100%;
    margin-bottom: 0.5rem;
  }
}
</style>
